<template>
  <div class="customer">
    <a-modal
      v-model="visible"
      :title="title"
      class="CustomerModel"
      centered
      :footer="[]"
    >
      <div
        v-if="flag===1"
        class="customer-content"
      >
        <div
          v-for="(item, index) in fileList"
          :key="index"
          @click="CustomerContentClick(item)"
        >
          <img
            :src="defaultUrlChildren"
            alt=""
          />
          <div class="origin-name">{{item.originName}}</div>
        </div>
      </div>
      <div
        v-else
        class="information"
      >
        <div>联系人: {{information.name}}</div>
        <div>联系方式: {{information.telephone}}</div>
        <div>微信: {{information.weChat}}</div>
      </div>
    </a-modal>
    <Customer-Service @customerServiceEmit="customerServiceEmit" />
  </div>
</template>

<script>
import CustomerService from "@/components/customerService/CustomerService";
import { getLocalStorage } from "@/utils/localstore"
import { searchFilesList, downFile } from "@/utils/getFiles"
import { message } from 'ant-design-vue'
import { getInformation } from '@/api/approve/approve'
export default {
  name: 'Customer',
  components: {
    CustomerService
  },
  data () {
    return {
      visible: false,
      fileList: [],
      title: '',
      defaultUrlChildren: '',
      activeUtlChildren: '',
      flag: 1,
      information: []
    }
  },
  methods: {
    customerServiceEmit (item) {
      const { type, title, activeUtlChildren, defaultUrlChildren } = item;
      const appId = getLocalStorage("appId");
      if (type && appId) {
        searchFilesList({ appId, type }, 50).then(fileInfo => {
          const { data } = fileInfo
          this.title = title
          this.activeUtlChildren = activeUtlChildren
          this.defaultUrlChildren = defaultUrlChildren
          if (data && data.length > 0) {
            this.fileList = data
            this.flag = 1
            this.visible = true
          } else {
            message.error(fileInfo.message)
          }

        })
      } else if (appId) {
        getInformation({ appId }).then(res => {
          const { data } = res
          if (data && data.length > 0) {
            this.title = title
            this.information = data[0]
            this.flag = 2
            this.visible = true
          }
        })
      }
    },
    CustomerContentClick (item) {
      downFile(item)
    }
  }
}
</script>

<style lang="less" scoped>
// .customer {
// background-color: red;
.customer-content {
  display: flex;
  min-height: 200px;
  > div {
    width: 25%;
    padding: 0 2.5%;
    display: flex;
    flex-direction: column;
    // text-align: center;
    align-items: center;
    img {
      height: 60px;
      width: 60px;
    }
    .origin-name {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      &:hover {
        display: block;
      }
    }
  }
  & :hover {
    text-decoration: underline;
    cursor: pointer;
  }
}
.information {
  > div {
    height: 28px;
    font-size: 16px;
  }
}
// }
</style>
